<template>
  <div class="cbx" @tap="onTap">
    <i v-if="!checked" class="if icon-checkbox uncheck"></i>
    <i v-else class="if icon-checkbox-checked checked"></i>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    checked: [Boolean]
  },
  methods: {
    onTap () {
      this.$emit('tap')
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';

.cbx {
  display: block;
}
i {
  color: @colorGray;
  font-size: 16px;
  &.checked {
    color: @colorTeal;
  }
}
</style>
